<template>
<!--  轮播图-->
  <el-carousel style="" trigger="click">
    <el-carousel-item><img src="banner/1.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="banner/2.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="banner/3.jpg" style="width:100%;height:100%;"></el-carousel-item>
  </el-carousel>

<!--  卡片区域-->
  <div style="width: 100%; padding-top: 4vh;float: left;display: flex" >

    <el-card style="width: 400px ;margin-right: 20px;margin-left: 2%">
      <template #header>
        <div class="card-header">
          <span>服务模块</span>
          <button style="float:right">全部</button>
        </div>
      </template>
      <div>
          <el-card style="width: 150px;height: 100px ;float: left;margin-left: 20px">
            <span>上门喂养</span>
            <img
                src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                style="width: 100%"
            />
          </el-card>





      </div>
    </el-card>

    <el-card style="max-width: 480px;margin-right: 20px">
      <template #header>
        <div class="card-header">
          <span>我的订单</span>
          <button style="float:right">全部</button>
        </div>
      </template>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="订单类型" width="180"></el-table-column>
          <el-table-column prop="age" label="订单状态" width="180"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card style="max-width: 480px;margin-right: 20px">
      <template #header>
        <div class="card-header">
          <span>百科</span>
          <button style="float:right">全部</button>
        </div>
      </template>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="类型" width="180"></el-table-column>
          <el-table-column prop="age" label="标题" width="180"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card style="width: 400px">
      <template #header>
        <div class="card-header">
          <span>宠圈</span>
          <button style="float:right">全部</button>
        </div>
      </template>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="内容" width="360"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>

  <template v-if="user?.username">
    用户名：{{user.username}}
    <br>
    用户等级：{{user.level}}

  </template>
  <br>
  <el-button type="primary" @click="show">buttonCont</el-button>
  <el-dialog title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" >
    <div style="width: 200px;height: 200px;color: #409EFF"></div>
  </el-dialog>

</template>

<script setup>
import {ref} from "vue";
const user = ref(getUser() || { username: '' });
const dialogVisible=ref(false);
const show=()=>{
  dialogVisible.value=true;
  console.log("点击了按钮");
  console.log(user.value.username);
}

const tableData = [
  { name: '张三', age: 24 },
  { name: '李四', age: 30 },
  { name: '王五', age: 22 },
  { name: '赵六', age: 28 }
]

</script>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>